<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
           请选择兴趣爱好
           <input type="checkbox" v-model="ischeckedAll" > 全选
           <div>
               <span v-for="item in list">
                    <input type="checkbox" :value="item.id" v-model="item.checked" />{{item.name}}
                </span>
           </div> 
    </div>
</body>
<script>
    new  Vue({
        el:"#app",
        data:{
            ischeckedAll:false,
            list:[{id:1,name:"吃饭",checked:false},{id:2,name:"睡觉",checked:false},{id:3,name:"豆豆",checked:false}]
        },
        watch:{
            ischeckedAll(flag){

                // this.list = this.list.map(item=>{
                //     item.checked = flag;
                //     return item;
                // })

               this.list.forEach(item=>{
                    item.checked=flag;
                    //return item;
                })

            }
        }
    })


</script>
</html>